import React, { useState, useEffect } from 'react'
import { inject, observer } from 'mobx-react'
import './musiclist.scss'

export default inject('qmusic')(observer(props => {
  // 在mobx状态管理中，实例对象是可以全组件进行访问的
  // 副作用相当于是一个生命周期函数，是用于模拟类组件中的生命周期

  const { qmusic } = props
  const [w, setW] = useState('许嵩')
  const [p, setPage] = useState(1)

  // 初始化显示的数据
  const init = () => {
    qmusic.getQList({
      w,
      p
    })
  }

  // 调用QQ音乐的接口
  useEffect(() => {
    init()    
    return undefined
  }, [])

  // 搜索文本框匹配的人
  const search = e => {
    console.log( e )
    if (e.keyCode === 13) {
      if (!e.target.value) return alert('请输入内容')
      init()
    }
  }

  // 渲染QQ音乐列表
  const renderQList = () => {
    return qmusic.qlist.map(item => (
      <li key={ item.id }>
        <span>{ item.id }</span>
        <span>{ item.name }</span>
        <span>{ item.singer[0].name }</span>
      </li>
    ))
  }

  // 用于页面之间的算法
  const getPage = () => {
    return p <= 3 ? [1, 2, 3, 4, 5] : [p - 2, p - 1, p, p + 1, p +2]
  }

  // 修改page能重新调用接口
  const changePage = val => {
    console.log( val )
    setPage(val)
    init()
  }

  const sub = () => {
    if (p <= 1) return alert('已经是第一页了')
    setPage(p - 1)
    init()
  }

  const add = () => {
    setPage(p + 1)
    init()
  }

  return (
    <div className="music-list">
      <header>QQ音乐列表</header>
      <main>
        <input 
          type="text"
          className='keyword'
          placeholder='请输入名称'
          value={ w }
          onChange={ e => setW(e.target.value) }
          onKeyUp={ e => search(e) }
        />
        <ul className="content">
          { renderQList() }
        </ul>
      </main>
      <footer>
        <span onClick={ sub }>{ '<<' }</span>
        {
          p > 3 && <span>...</span>
        }
        {
          getPage().map(item => (
            <span 
              key={ item }
              className={ item === p ? 'active' : '' }
              onClick={ () => changePage(item) }
            >
              { item }
            </span>
          ))
        }
        <span>...</span>
        <span onClick={ add }>{ '>>' }</span>
      </footer>
    </div>
  )
}))